<script>
import axios from "axios";

export default {
    name: "Film",
    data() {
        return {
            films: [],
            total: 1,
            pageSize: 3,
            pageNum: 1,
            info: {}
        }
    },
    methods: {
        getInfoById(filmId=this.$route.query.id) {
            axios.get("https://m.maizuo.com/gateway", {
                params: {
                    filmId
                },
                headers: {
                    "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
                    "X-Host": "mall.film-ticket.film.info"
                }
            }).then(value => {
                // console.log(value.data)
                this.info = value.data.data.film;
            })
        },
        goHome() {
            // this.$pages.back();
            // this.$pages.forward();
            // this.$pages.go(1);
            this.$router.push("/");
        },
        getFilmList() {
            axios.get("https://m.maizuo.com/gateway?cityId=110100&type=1&k=6369336", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                },
                headers: {
                    "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
                    "X-Host": "mall.film-ticket.film.list"
                }
            }).then(value => {
                this.films = value.data.data.films;
                this.total = value.data.data.total;
            })
        }
    },
    watch: {
        pageNum() {
            this.getFilmList();
        },
        // "$route.query.id"(newValue, oldValue) {
        //     // console.log(newValue,oldValue)
        //     this.getInfoById();
        // }
    },
    mounted() {
        // console.log("mounted");
        // // 1- 电影列表
        this.getFilmList();
        // // 2- 电影详情
        if (this.$route.query.id) {
            this.getInfoById();
        }

        // const p1 = axios.get("https://m.maizuo.com/gateway?cityId=110100&type=1&k=6369336", {
        //     params: {
        //         pageNum: this.pageNum,
        //         pageSize: this.pageSize
        //     },
        //     headers: {
        //         "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
        //         "X-Host": "mall.film-ticket.film.list"
        //     }
        // });
        // const p2 = this.$route.query.id &&  axios.get("https://m.maizuo.com/gateway", {
        //     params: {
        //         filmId: this.$route.query.id
        //     },
        //     headers: {
        //         "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
        //         "X-Host": "mall.film-ticket.film.info"
        //     }
        // });
        // axios.all([p1,p2]).then(axios.spread((s1,s2)=>{
        //     // console.log(s1.data.data.films)
        //     this.films = s1.data.data.films;
        //     this.total = s1.data.data.total;
        //     if(s2)
        //         this.info = s2.data.data.film;
        // }));

    },
    computed: {
        pageSum() {
            return Math.ceil(this.total / this.pageSize)
        }
    },
    beforeRouteUpdate(to,from,next){
        // console.log("beforeRouteUpdate->to",to);// 更新后的路由信息
        // console.log("beforeRouteUpdate->from",from);// 更新前的路由信息
        // console.log("beforeRouteUpdate->next",next);

        // console.log(this);// 当前的组件实例
        // next();// next(true)
        // 以下写法不正确
        // next(function(){
        //     console.log("next")
        // })

        this.getInfoById(to.query.id);
        next();
    },
    beforeUpdate() {
        console.log("beforeUpdate");
    },
    updated(){
        console.log("updated")
    }
}
</script>

<template>
    <div>
        <button @click="goHome">返回首页-{{$route.query.id}}</button>
        <button v-show="pageNum>1" @click="pageNum--">上一页</button>
        {{ pageNum }}/{{ pageSum }}
        <button v-show="pageNum<pageSum" @click="pageNum++">下一页</button>
        <div v-for="item in films" :key="item.filmId">
            <router-link :to="'/film?id='+item.filmId">{{ item.name }}</router-link>
        </div>
        <hr/>
        <h3>{{ info.name }}</h3>
        <p>{{ info.synopsis }}</p>
        <img :src="info.poster" alt="">
    </div>
</template>

<style scoped>

</style>